<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <script>!function(e,t){var n=t.documentElement,d=e.devicePixelRatio||1;function i(){var e=n.clientWidth/3.75;n.style.fontSize=e+"px"}if(function e(){t.body?t.body.style.fontSize="16px":t.addEventListener("DOMContentLoaded",e)}(),i(),e.addEventListener("resize",i),e.addEventListener("pageshow",function(e){e.persisted&&i()}),2<=d){var o=t.createElement("body"),a=t.createElement("div");a.style.border=".5px solid transparent",o.appendChild(a),n.appendChild(o),1===a.offsetHeight&&n.classList.add("hairlines"),n.removeChild(o)}}(window,document)</script>
    <style>
        html,body,ul,li,p{margin: 0;padding: 0;list-style: none;}
        html,body{ width: 100%;height: 100%;background: url("../../images/1585061994.jpg") no-repeat;background-size: cover;}
        .centerBtn11{position: absolute;top:0;left: 0;right: 0;bottom: 0;margin: 0 auto;display: flex;align-items: center;justify-content: center;}
        .centerBtn{position:absolute;top:0;right:0;bottom:0;left:0;display: block;height:0.8rem;width:0.8rem;margin:auto;border-radius:50%;font-size: 0.13rem;color: #252525;border:none;outline:none;background: rgba(255,255,255,0.3);box-shadow: 0 0 0.05rem rgba(255,255,255,0.3)}
        .centerBtn:before{content:"";display: block;margin:0 auto;height:0.5rem;width:0.5rem;background: url("") no-repeat;background-size: contain;background-position: center;}
        @keyframes outScreen { 0% {transform: scale(1);transform-origin: center;opacity: 1;} 60% {transform: scale(0.5);transform-origin: center;opacity: 1;} 100% {transform: scale(0.5);transform-origin: center;opacity: 0;} }
        .outScreen {animation: outScreen 800ms;}
        .none{display: none!important;}
        .siteBox{display: none;position: absolute;top:0;left: 0;right: 0;bottom: 0;padding:0.1rem;margin: 0.28rem 0.24rem 0;border-radius:0.08rem;background: rgba(255,255,255,0.35);}
        .siteBox>li{position:relative;display: inline-block;width: 1.48rem;height: 0.8rem;padding:0.08rem 0.08rem 0.08rem 0.48rem;margin-bottom:0.1rem;line-height:0.28rem;text-align: center;border-radius:0.1rem;font-size:0.2rem;color:#252525;background: rgba(255,255,255,0.65);box-sizing: border-box;overflow: hidden;}
        .siteBox>li:before{content: "";position:absolute;top:0.22rem;left: 0.08rem;display: inline-block;width: 0.36rem;height: 0.36rem;background: url("") no-repeat;background-size: contain;}
        .siteBox>li:nth-child(odd){margin-right: 0.05rem;}
        .site{display: flex;width:100%;height:100%;align-items: center;justify-content: center;}
    </style>
</head>
<body>

<button class="centerBtn" id="centerBtn">地点选择</button>
<ul class="siteBox" id="siteBox">
    <!--<li>
        <div class="site">
            <span>围城</span>
        </div>
    </li>-->
</ul>
</body>
<script type="text/javascript" src="../../script/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function () {
        var obj = {
            init: function () {
                this.addEvent();
            },
            addEvent: function () {
                var that = this;
                $('#centerBtn').click(function () {
                    var target = $(this);
                    target.addClass("outScreen");
                    that.ajaxGetSiteList();
                    setTimeout(function () {
                        target.removeClass("outScreen").addClass("none");
                        $('#siteBox').slideDown();
                    },800)
                })
            },
            ajaxGetSiteList: function () {
                var that = this;
                $.ajax({
                    type: 'Get',
                    url: 'getSiteList',
                    timeout: 10000,
                    dataType: "json",
                    headers: {
                        'Access-Control-Allow-Origin':'*',
                        'Content-Type': 'text/plain;charset=UTF-8'
                    },
                    contentType: 'application/x-www-form-urlencoded',
                    success: function (res) {
                        if (res.code === 0) {
                            var list = res.data; //[{cityName:"城市1",id:1}];
                            var html = "";
                            list.forEach(function (p1, p2, p3) {
                                html += '<li data-id="'+p1.id+'" data-name="'+p1.cityName+'"><div class="site"><span>'+p1.cityName+'</span></div></li>'
                            })
                            $('#siteBox').html(html);
                            that.addCityEvent();
                        }
                    },error:function () {
                        var list = [{cityName:"城市1",id:1}];
                        var html = "";
                        list.forEach(function (p1, p2, p3) {
                            html += '<li data-id="'+p1.id+'"  data-name="'+p1.cityName+'"><div class="site"><span>'+p1.cityName+'</span></div></li>'
                        })
                        $('#siteBox').html(html);
                        that.addCityEvent();
                    }
                })
            },
            addCityEvent: function () {
                $('#siteBox li').click(function () {
                    var id = $(this).attr('data-id');
                    var name = $(this).attr('data-name');
                    window.location.href = './thermodynamic.html?siteName=' + encodeURI(name);
                })
            }
        };
        obj.init();
    })
</script>
</html>